<%= render "shared/error_messages", resource: resource %>

<div class="flex flex-col justify-center min-h-full py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900">
      <%= t("devise.passwords.edit.change_your_password") %>
    </h2>

    <%= render "devise/shared/signup_link" if devise_mapping.registerable? %>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="p-4 px-4 pb-8 bg-white shadow sm:rounded-lg sm:px-10">
      <%= form_for resource, as: resource_name, url: password_path(resource_name), method: :put, html: {class: "space-y-6"} do |f| %>
        <%= f.hidden_field :reset_password_token %>

        <div>
          <%= f.label :password, class: "block text-sm font-medium text-gray-700" %>
          <div class="mt-1">
            <%= f.password_field :password, autocomplete: "new-password", class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm" %>
          </div>
        </div>

        <div>
          <%= f.label :password_confirmation, class: "block text-sm font-medium text-gray-700" %>
          <div class="mt-1">
            <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm" %>
          </div>
        </div>

        <div>
          <%= f.submit t("devise.passwords.edit.change_my_password"), class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
        </div>
      <% end %>
    </div>
  </div>
</div>
